<!-- 排课管理系统 -->
<template>
  <div class="box">
    <!-- 上半 -->
    <div class="top">
      <el-form ref="form" :model="form" label-width="80px" inline>
        <el-form-item label="排课名称">
          <el-input v-model="form.name" placeholder="请输入排课名称"></el-input>
        </el-form-item>
        <el-form-item label="学期">
          <el-select v-model="form.xueqi" placeholder="请选择学期">
            <el-option label="小学" value="xiaoxue"></el-option>
            <el-option label="初中" value="chuzhong"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="form.state" placeholder="请选择状态">
            <el-option label="全部" value="all"></el-option>
            <el-option label="进行中" value="jinxingzhong"></el-option>
            <el-option label="已完成" value="yiwancheng"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-divider></el-divider>
      <div class="btn">
        <el-button type="primary">查询</el-button>
        <el-button>重置</el-button>
      </div>
    </div>
    <!-- 下半 -->
    <div class="tab">
      <div class="icon">
        <i class="el-icon-upload2">下载选课结果模版</i>
       
          <i class="el-icon-upload2">导入排课表</i>
         
        <i class="el-icon-circle-plus" @click="add">新增排课</i>
      </div>
      <div class="table">
      <el-table
    :data="tableData"
    border
    style="width: 100%;">
    <el-table-column
    type="index"
      label="序号"
      width="100">
    </el-table-column>
    <el-table-column
      prop="name"
      label="排课名称"
      width="100">
    </el-table-column>
    <el-table-column
      prop="school"
      label="学校">
    </el-table-column>
    <el-table-column
      prop="xuenian"
      label="学年">
    </el-table-column>
    <el-table-column
      prop="xueqi"
      label="学期">
    </el-table-column>
    <el-table-column
      prop="nianji"
      label="年级">
    </el-table-column>
    <el-table-column
      prop="state"
      label="状态">
    </el-table-column>
    <el-table-column
      prop="time"
      label="创建时间">
    </el-table-column>
    <el-table-column
      prop="caozuo"
      label="操作">
      
        <el-button type="text" size="small">编辑</el-button>
        <el-button type="text" size="small">删除</el-button>
        <el-button type="text" size="small">发布</el-button>
    </el-table-column>
  </el-table>
</div>
<div class="pag">
<el-pagination

      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400">
    </el-pagination>
  </div>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        name:"排课1 ",
        school:"北京小学",
        xuenian:"2022-2023",
        xueqi:"小学",
        nianji:"一年级",
        state:"进行中",
        time:"2022-09-01 10:18",

      }],
      form: {
        name: "",
        xueqi: "",
        state: "",
      },
    };
  
  },
created(){
  const data =this.tableData[0];
  for(let i=0;i<10;i++){
    this.tableData.push(data)
  }

},
methods:{
  add(){
    this.$router.push({name:"AddClass"})
  }
}  
};
</script>

<style scoped lang="scss">
.box {
  display: flex;
  flex-direction: column;
  height: 100vh;
  .top {
    height: 160px;
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
    .el-divider--horizontal {
      margin-top: 0;
    }
  }
  .tab {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: #fff;
    margin-top: 20px;
    border-radius: 10px;
    .icon {
      margin:10px 0;
      padding: 10px;
      display: flex;
      justify-content: flex-end; /**子元素会靠右对齐 */
      gap: 15px;
      i {
        display: flex;
        align-content: center;
        cursor: pointer;
        // margin-top: 20px;
        // float: right;
        // margin-right: 10px;
        color: blue;
        margin-bottom: 20px;
        &:hover {
          color: #0066cc;
        }
      }
    }
    .table{
      padding:10px;
    }
    .pag{
      display: flex;
      justify-content: flex-end;
      margin: 10px ;
    }
  }
}
</style>
